<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <div th:replace="common/fragments :: meta"></div>
    <!-- load css -->
    <div th:replace="common/fragments :: css"></div>

    <title>employee - view</title>
</head>

<body>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <!-- 与modelAttribute注解关联需要使用th:object-->
            <form id="employee-form" method="post" th:action="@{/process}" th:object="${employee}">
                <!-- 对象属性绑定使用th:field -->
                <input th:field="*{id}" type="hidden"/>
                <input id="firstName" th:field="*{firstName}" type="text"/>
                <div class="invalid-feedback"
                     th:errors="*{firstName}"
                     th:if="${#fields.hasErrors('firstName')}">
                </div>
                <input id="lastName" th:field="*{lastName}" type="text"/>
                <div class="invalid-feedback"
                     th:errors="*{lastName}"
                     th:if="${#fields.hasErrors('lastName')}">
                </div>
                <input id="SN" th:field="*{SN}" type="text" />
                <div class="invalid-feedback"
                     th:errors="*{SN}"
                     th:if="${#fields.hasErrors('SN')}">
                </div>

                <input id="city" th:field="*{address.city}" type="text"/>
                <div class="invalid-feedback"
                     th:errors="*{address.city}"
                     th:if="${#fields.hasErrors('address.city')}">
                </div>

                <input id="state" th:field="*{address.state}" type="text"/>
                <div class="invalid-feedback"
                     th:errors="*{address.state}"
                     th:if="${#fields.hasErrors('address.state')}">
                </div>

                <input id="zipCode" th:field="*{address.zipCode}" type="text"/>
                <div class="invalid-feedback"
                     th:errors="*{address.zipCode}"
                     th:if="${#fields.hasErrors('address.zipCode')}">
                </div>

                <select id="department" name="deptId">
                    <option th:each="dept : ${departments}"
                            th:text="${dept.name}"
                            th:value="${dept.did}">
                    </option>
                </select>
                <div th:each="role, state: ${roles}">
                    <input class="form-checkbox"
                           name="roleIds"
                           th:id="${state.index}"
                           th:value="${role.rid}"
                           type="checkbox"/>

                    <label th:for="${state.index}"
                           th:text="${role.name}">
                    </label>
                </div>
                <input type="submit" value="Submit"/>
            </form>
        </div>
    </div>
</div>

<div th:replace="common/fragments :: copy-right"></div>

</body>

<!-- load js -->
<div th:replace="common/fragments :: js"></div>

<script>
    $(document).ready(function(){
        var checkboxs = $('.form-checkbox')
        checkboxs.each(function (){
            var checkbox = $(this)
            if(($.inArray(checkbox.val(), userRoles)) !== -1){
                checkbox.attr('checked', true)
            }
        })
    })


</script>

</html>